<template>
  <div class="Commissionrecord">
    <div class="myMoney qqq" style="margin-bottom: 20px;">
      <div class="recharge one">
        <div class="money">
          总提现金额
          <!-- <span class="biao1">年</span> -->
        </div>
        <div class="xian"></div>
        <div class="operation one">
          <!-- <img src="../../assets/tixian.png" class='ibiao'> -->
          <b>{{ all_withdraw ||0 }}元</b>
        </div>
      </div>
      <div class="recharge tow">
        <div class="money">
          当前可提现金额
          <!-- <span class="biao2">月</span> -->
          <el-button type="primary" class="withdrawalrecord_submit" @click="dialogForm">提现</el-button>
        </div>
        <div class="xian"></div>
        <div class="operation">
          <div>
            <b>{{ can_withdraw || 0 }}元</b>
            <!-- <img src="../../assets/tixian.png" class='ibiao'> -->
          </div>
        </div>
      </div>
      <div class="recharge three">
        <div class="money">
          上次提现金额
          <!-- <span class="biao3">周</span> -->
        </div>
        <div class="xian"></div>
        <div class="operation">
          <!-- <img src="../../assets/tixian.png" class='ibiao'> -->
          <b>{{ last_withdraw || 0 }}元</b>
        </div>
      </div>
    </div>
    <div class="block">
      <el-col :span="24" class="operation">
        <div class="block">
          <el-date-picker
            class="timetable"
            v-model="riqixuanze"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="timeChange"
          ></el-date-picker>
          <el-button type="primary" class="sousuo" @click="grabble"
            >搜索</el-button
          >
        </div>
      </el-col>
    </div>
    <!-- PC端 -->
    <div class="pczhanshi hidden-xs-only">
      <el-table :data="listData" style="width: 100%;" :row-style="{height: '70px'}">
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.creat_time}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="提现金额"
        >
        <template slot-scope="scope">
          <span>{{ scope.row.withdraw_amount}}</span>
        </template>
        </el-table-column>
        <el-table-column label="交易状态" width="350">
          <template slot-scope="scope">
            <span>{{ scope.row.states }}</span>
          </template>
        </el-table-column>
        <template slot="empty" v-if="loding">
          <img class="data-pic" src="@/assets/BGT.png" alt="" />
        </template>
      </el-table>
    </div>

    <div class="dashadiao hidden-xs-only" style="height: 70px;">
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage2"
         :page-sizes="xiabiao"
         :page-size="xianshitiaoshu"
         layout="total, sizes, prev, pager, next, jumper"
         :total="tiaoshu"
       >
       </el-pagination>
     </div>

      <!-- 移动端 -->
    <div class="zhanshi hidden-sm-and-up">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item
          :name="index"
          v-for="(x, index) in listData"
          :key="index"
        >
          <template slot="title">
            <span>提现时间: &nbsp;{{ x.creat_time}}</span>
          </template>
          <!-- <div class="sj">订单id: &nbsp;{{x.id}}</div> -->
          <div class="sj">提现金额: &nbsp;{{ x.withdraw_amount }}</div>
          <!-- <div class="sj">用户id: &nbsp;{{x.yonhu_id}}</div> -->
          <div class="sj">提现状态: &nbsp;{{ x.states }}</div>
        </el-collapse-item>
      </el-collapse>
      <div class="dashadiao" style="width: 100% !important;height: 70px;">
         <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="currentPage2"
           :page-sizes="xiabiao"
           :page-size="xianshitiaoshu"
           layout="total, sizes, prev, pager, next"
           :total="tiaoshu"
         >
         </el-pagination>
       </div>
      </div>


    <el-dialog
      title="提现账号信息绑定"
      :visible.sync="dialogFormVisible"
      v-if="!user.zhifubao"
      :center="true"
    >
      <el-form :model="bindingForm" :rules="rules" ref="bindingForm">
        <el-form-item class="bindingtext">
          <p>绑定说明:</p>
          <p>1、请您确保输入的姓名和支付宝账号的真实性，否则会导致提现失败</p>
          <p>2、系统默认只绑定一个支付宝账号</p>
          <p>希望小主，不要拿自己的返佣开玩笑哦~</p>
        </el-form-item>
        <el-form-item
          label="姓名"
          label-width="120px"
          style="margin-left: -30px"
          prop="userName"
        >
          <el-input v-model="bindingForm.alipay_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="支付宝账号"
          label-width="120px"
          style="margin-left: -30px"
          prop="alipayNum"
        >
          <el-input
            v-model="bindingForm.alipay_account"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item class="mySubmit">
          <el-button type="primary" @click="dialogFalg('bindingForm')"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
  </div>
</template>
<script>
import moment from "moment";
import {_debounce1} from '@/public/App';
import {mapState} from 'vuex'
export default {
  props: {},
  data() {
    return {
      listData:[],
      page_index:1,
      page_cnt:10,
      begin_time:'',
      end_time:'',
      list_cnt:'',
      all_withdraw:'',
      can_withdraw:'',
      last_withdraw:'',
      xiabiao: [10, 20, 50, 100],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      riqixuanze: [],
      tableData: [],
      shouji: [],
      pc: "1",
      currentPage2: 1,
      shijian1: "",
      shijian2: "",
      kaishitiaoshu: 0,
      dangyetiaoshu: 1,
      xianshitiaoshu: 10,
      jieshutiaoshu: 10,
      activeName: "",
      zongshouyi: "",
      zongfanyong: "",
      zongchae: "",
      zongchongzhi: 0, //总充值
      jinrichongzhi: 0, //今日充值
      zuorichongzhi: 0, //昨日充值
      zongtiaoshu: 0, //总条数
      tiaoshu: 0, //条数
      shangcitixian: 0,
      zongshouyi: 0,
      zongtixianjine: 0,
      loding: false,
      dialogFormVisible:false,
      bindingForm:{
      alipay_name: "",
      alipay_account: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入姓名", trigger: "change" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
          {
            pattern: /^[A-Za-z\u4e00-\u9fa5]+$/,
            message: "不允许输入空格等特殊符号以及数字",
          },
        ],
        alipayNum: [
          { required: true, message: "请输入支付宝账号", trigger: "blur" },
          {
            pattern: /^[A-Za-z0-9\u9fa5\@.]+$/,
            message: "不允许输入中文,空格等特殊符号",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
    this.commisslist();
  },
  mounted() {},
  watch: {
    riqixuanze(newVal, oldVal) {
      if (newVal == null) {
        this.riqixuanze = [];
      }
      if (newVal) {
        this.kaishishu = 0;
        this.jieshushu = this.limt;
      }
    }
  },
  methods: {
    //提现触发
    dialogFalg(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const [err, res] = await this.$http.request({
            url: "/bindAlipay",
            method: "POST",
            data: this.bindingForm
          });
          if (err) return;
          console.log(res.data.result)
          if(res.data.result===1){
            this.$message({
              showClose: true,
              message: "提现成功!",
              type: "success",
              duration: 1800,
            });
          }
          this.bindingForm.alipay_name='',
          this.bindingForm.alipay_account='',
          this.dialogFormVisible = false;
        }
      });
    },

    dialogForm:_debounce1( function(){
      if (this.user.zhifubao) {
        this.$confirm("即将提现所有金额, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(async ()=>{
          const [err, res] = await this.$http.request({
            url: "chuangjiantixian/",
            method: "POST",
          });
          if (err) return;
          if (res.data.code == 200) {
            this.$message({
              showClose: true,
              message: "提现成功!",
              type: "success",
              duration: 1800,
            });
            this.commisslist();
            // this.tixianxinqi();
          }
          if(res.data.code == 400){
            this.$message({
              showClose: true,
              message: "提现失败！"+res.data.cuowutishi,
              type: "error",
              duration: 1800,
            });
          }
        })
        .catch(()=>{
          this.$message({
            type: "info",
            message: "已取消提现!"
          });
        })
      } else {
        this.dialogFormVisible = true;
      }
    }),
    timeChange(time) {
      if (time) {
        const start = this.$moment(time[0])
          .startOf("day")
          .format("YYYY-MM-DD");
        const end = this.$moment(time[1])
          .endOf("day")
          .format("YYYY-MM-DD");
        this.riqixuanze = [start, end];
      } else {
        this.riqixuanze = [];
      }
    },
    //提现记录接口
    async commisslist() {
      let data = {
        page_index: this.page_index,
        page_cnt: this.page_cnt,
        begin_time:this.begin_time,
        end_time:this.end_time
      };
      const [err, res] = await this.$http.request({
        url: "/withdrawRecord",
        method: "GET",
        data
      })
       if (err) return;
       console.log(res.data.data)
       this.all_withdraw=res.data.data.all_withdraw
       this.can_withdraw=res.data.data.can_withdraw
       this.last_withdraw=res.data.data.last_withdraw
       this.listData=res.data.data.withdraw_list
       this.tiaoshu=res.data.data.list_cnt
       this.loding = true;
    },
    handleEdit(index, row) {},
    //一页多少条
    handleDelete(index, row) {},
    async handleSizeChange(val) {
      this.page_cnt=val
      this.commisslist()
    },
    //跳到第几页
    async handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page_index=val
      this.commisslist()
    },
    //点击搜索触发
    async grabble() {
      this.begin_time=this.riqixuanze[0]
      this.end_time=this.riqixuanze[1]
      this.commisslist()
    }
  },
};
</script>

<style scoped lang="stylus">
@import './Withdrawalrecord.styl';
</style>
